<template>
	<view>
		<view class=" bg box-sizing" style="background-image: url('static/icon/bg-vip.png');">
			<view class="px-17 flex  flex-y-center flex-x-space-between" :style="`padding-top:${statusHeight}px`">
				<view class="icon-zuojiantou iconfont text-white" @click="$page.back()"></view>
				<text class="text-white">会员中心</text>
				<view></view>
			</view>
		</view>
		<view class="mt-18 px-12">
			<view class="bg px-14 py-24 box-sizing w-p-100 h-110"
				style="background-image: url('static/icon/bg-vip-top.png');">
				<view class="flex flex-y-center">
					<image class="w-60 h-60 round-circle" :src="USERINFO?.avatar"></image>
					<view class="flex flex-column ml-10 grid-gap-6">
						<text class="fs-20 fw-600 text-41230B">{{USERINFO?.nickname}}</text>
						<text
							class="fs-12 text-41230B">{{USERINFO?.is_vip=='1'?USERINFO?.expire_time+'到期':'您还没有开通会员'}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="p-12">
			<text class="fs-18 fw-600 text-white">充值套餐</text>
		</view>
		<view class="px-15 flex grid-gap-10 overflow-x-scroll">
			<view class="vip-item flex  flex-column flex-1  text-center flex-x-space-between py-14 px-4 box-sizing"
				:style="`background-image: url('${select.id==item.id?'static/icon/bg-re.png':'static/icon/bg-b.png'}');`"
				v-for="(item,index) in vipList" @click="select=item" :key='index'>
				<view class="flex flex-column grid-gap-3">
					<text :class='select.id==item.id?"text-1":"text-3"'
						class="fw-600 fs-20 text-ellipsis-1">{{item.name}}</text>
					<text :class='select.id==item.id?"text-1":"text-3"'
						class="fw-600 fs-12 text-ellipsis-1">{{item.desc}}</text>
				</view>
				<view class="flex flex-column grid-gap-3">
					<view class="flex flex-center text-center">
						<text :class='select.id==item.id?"text-1":"text-white"' class="fs-12 fw-600">￥</text>
						<text :class='select.id==item.id?"text-1":"text-white"'
							class="fs-19 fw-600 text-ellipsis-1">{{item.price}}</text>
					</view>
					<text :class='select.id==item.id?"text-1":"text-999"'
						class="fs-12 fw-600 text-666 text-ellipsis-1">{{item.day}}天</text>
				</view>
			</view>
		</view>

		<view class="p-12">
			<view class="w-p-100 text-center round-12 py-11 fs-16 fw-600"
				style="background: linear-gradient(to right,#FFDBB5,#CA9760);" @click="createOrder">
				立即开通
			</view>
		</view>

		<view class="p-12 pb-safe-area">
			<text class="fs-18 fw-600 text-white">会员权益</text>
			<view class="mt-12">
				<mp-html :content='detail?.content'></mp-html>
			</view>
		</view>
		<y-popup v-if='popupCountShow' @close='popupCountShow=false' round='16rpx'>
			<view class="p-30 flex flex-column text-center">
				<text class="fs-20 text-333">{{count}}</text>
				<text class="fs-12 text-999 mt-10">支付结果查询中...</text>
			</view>
		</y-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { $http, $tool, $page } from '@/utils/index';
	import { useUserStore, useRefs, useWebConfigStore } from '@/stores'
	import { pay } from '@/utils/pay.js'
	const popupCountShow = ref(false)
	const count = ref(10)
	const { USERINFO } = useRefs(useUserStore())
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const vipList = ref()
	const statusHeight = ref(10)
	const detail = ref()
	const select = ref({ id: 0 })
	onLoad((e) => {
		statusHeight.value += uni.getSystemInfoSync().statusBarHeight
		if (e.oid) {
			popupCountShow.value = true
			getStatus()
		}
		getList()
		getTag()
		getUserInfo()
	})

	const getList = () => {
		$http.get('Vip/getList').then(res => {
			vipList.value = res.data
		})
	}
	const getTag = () => {
		$http.get('Tags/getDetail', { name: 'vip' }).then(res => {
			detail.value = res.data
		})
	}

	const getUserInfo = () => {
		const { setUserInfo, isLogin, clearUserInfo } = useUserStore()
		$http.get('User/getUser').then(res => {
			setUserInfo(res.data)
		})
	}

	const getStatus = (id) => {
		$http.get('Order/getStatus', { id: id }).then(res => {
			if (res.data.status == true) {
				count.value = 10
				popupCountShow.value = false
				getUserInfo()
				$tool.toast('购买成功')
			} else {
				if (count.value > 0) {
					setTimeout(() => {
						getStatus(id)
						count.value--
					}, 1000)
				} else {
					popupCountShow.value = false
					count.value = 10
					$tool.toast('查询订单状态失败')
				}
			}
		})
	}

	const createOrder = () => {
		if (!select.value.id) {
			$tool.toast('请选择套餐');
			return;
		}
		let source = 'weixin';
		// #ifdef H5
		if (WEBCONFIG?.value.epay_state == 1) {
			source = 'epay'
		} else {
			source = 'official'
		}
		// #endif
		$http.post('Order/vipOrder', { source: source, id: select.value.id }).then(res => {
			pay(source, res.data.res).then(res1 => {
				popupCountShow.value = true
				getStatus(res.data.order_id)
			}).catch(err => {
				console.log(err)
			})
		})
	}
</script>

<style>
	.bg {
		width: 100%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	page {
		background-color: #25221A;
	}

	.vip-item {
		min-width: 209rpx;
		height: 262rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.text-1 {
		color: #1F1F39;
	}

	.text-2 {
		color: #D7A56F;
	}

	.text-3 {
		background-image: linear-gradient(180deg, #FFE3A3 0%, #FEEBCB 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
</style>